import { h, Component } from 'preact';
import ReactDOM from 'react-dom';
import classNames from 'classnames';
import s from './Tpl.scss';

import tp1 from './1.png';
import tp2 from './2.png';
import tp3 from './3.png';
import tp4 from './4.png';
import tp5 from './5.png';


export function tpl1(points, name, company, jobTitle, code, phone, face) {
	return (<div className={s.tpl1}>
					<img className={s.mainpic} src={tp1} alt=""/>
					<img className={s.face} src={face} alt=""/>
					<div className={s.code}>
						<img src={code}/>
						<p>长按二维码识别<br />了解职业档案</p>
					</div>
					<span className={s.jf}>{points}</span>
					<div className={s.name}>{name}</div>
					<div className={s.info}>
						现职企业：{company} <br />
						职位：{jobTitle}<br />
						手机：{phone}<br />
					</div>
				</div>);
}

export function tpl2(points, name, company, jobTitle, code, phone, face) {
	return (<div className={s.tpl2}>
					<img className={s.mainpic} src={tp2} alt=""/>
					<img className={s.face} src={face} alt=""/>
					<div className={s.code}>
						<img src={code}/>
						<p>长按二维码识别<br />了解职业档案</p>
					</div>
					<img className={s.tag} src={require('./tag.png')} alt=""/>
					<div className={classNames(s.name, 'al-c', 'txt_cut')}>{name}</div>
					<div className={s.info}>
						<p>等级评分：<span>{points}</span></p>
						<p className="txt_cut">现职企业：<span>{company}</span></p>
						<p>职位：<span>{jobTitle}</span></p>
						<p>手机：<span>{phone}</span></p>
					</div>
				</div>);
}

export function tpl3(points, name, company, jobTitle, code, phone, face) {
	return (<div className={s.tpl3}>
					<img className={s.mainpic} src={tp3} alt=""/>
					<img className={s.face} src={face} alt=""/>
					<div className={s.code}>
						<img src={code}/>
						<p>长按二维码识别<br />了解职业档案</p>
					</div>
					<img className={s.tag} src={require('./tag.png')} alt=""/>
					<div className={classNames(s.name, 'al-c', 'txt_cut')}>{name}</div>
					<div className={s.info}>
						<p>等级评分：<span>{points}</span></p>
						<p className="txt_cut">现职企业：<span>{company}</span></p>
						<p>职位：<span>{jobTitle}</span></p>
						<p>手机：<span>{phone}</span></p>
					</div>
				</div>);
}

export function tpl4(points, name, company, jobTitle, code, phone, face) {
	return (<div className={s.tpl4}>
					<img className={s.mainpic} src={tp4} alt=""/>
					<img className={s.face} src={face} alt=""/>
					<div className={s.code}>
						<img src={code}/>
						<p>长按二维码识别<br />了解职业档案</p>
					</div>
					<div className={s.tel}>{phone}</div>
					<div className={classNames(s.name, 'al-c', 'txt_cut')}>{name}</div>
					<p className={classNames(s.djpf, 'font-small')}>等级评分<br/><span>{points}</span></p>
					<div className={s.info}>
						<p className="txt_cut">现职企业<span className="font-bigger">{company}</span></p>
						<p><span>{jobTitle}</span></p>
					</div>
				</div>);
}

export function tpl5(points, name, company, jobTitle, code, phone, face) {
	return (<div className={s.tpl5}>
					<img className={s.mainpic} src={tp5} alt=""/>
					<img className={s.face} src={face} alt=""/>
					<div className={s.code}>
						<img src={code}/>
						<p>长按二维码识别<br />了解职业档案</p>
					</div>
					<div className={classNames(s.name, 'al-c', 'txt_cut')}>{name}
					</div>
					<div className={classNames(s.jobname, 'al-c', 'txt_cut')}>{jobTitle}
					</div>
					<p className={classNames(s.djpf, 'font-small')}>等级评分<br/><span>{points}</span></p>
					<div className={s.info}>
						<p>联系电话<span className="font-biggest">{phone}</span></p>
						<p className="txt_cut">现职企业<span className="font-bigger">{company}</span></p>
					</div>
				</div>);
}

export const menulist = [{
	name: '默认',
	id: 1
},{
	name: '模版2',
	id: 2
},{
	name: '模版3',
	id: 3
},{
	name: '模版4',
	id: 4
},{
	name: '模版5',
	id: 5
}];
